import React, {useEffect, useRef, useState, lazy, Suspense} from 'react';
import style from './BlogArticle.module.scss'
import {getBlogTextOne} from "./BlogArticleApi";
import MySurfacePlotTop from "../../component/MySurfacePlotTop/MySurfacePlotTop";
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import {useLocation} from "react-router-dom";
import {timestampToTime} from "../../utils/dateTimeUtlis";
import wangeditorCss from '../../wangeditor.module.scss'
import CommentsSection from "../commentsSection/commentsSection";
// const CommentsSection = lazy(import('../commentsSection/commentsSection'))

// 我的笔记内容
function BlogArticle() {
    const [BlogArticleText, setBlogArticleText] = useState({})
    const Location = useLocation()
    const MyCommentsSection = useRef()

    // 打开和关闭评论区
    const setMyCommentAreaStateFun = () => {
        MyCommentsSection.current.showModal()
    }

    // 获取当前id博客内容
    useEffect(() => {
        const id = Location.search.split("=")[1]
        getBlogTextOne({id: id}).then((res) => {
            setBlogArticleText(res.data.rows[0])
        }).catch(e => {
            console.log(e)
        })
    }, [Location.search])


    // 开启高亮
    useEffect(() => {
        // 配置 highlight.js
        hljs.configure({
            // 忽略未经转义的 HTML 字符
            ignoreUnescapedHTML: true
        })

        // 获取到内容中所有的code标签
        const codes = document.querySelectorAll('pre code')
        codes.forEach((el) => {
            // 让code进行高亮
            hljs.highlightElement(el)
        })
    }, [BlogArticleText])

    return (
        <div className={style.MyNoteContent}>
            <main className={style.MyNoteMain}>
                {/*图片*/}
                <div>
                    <MySurfacePlotTop
                        blogCoverTitle={BlogArticleText.blogCoverTitle}
                        blogTitle={BlogArticleText.blogTitle}
                        blogTypeState={true}
                        updatedAt={BlogArticleText.updatedAt}
                        blogCommentNumber={BlogArticleText.blogCommentNumber}
                        blogPageView={BlogArticleText.blogPageView}
                    >
                    </MySurfacePlotTop>
                </div>
                {/*// 展示区*/}
                <div className={style.ContentArea}>
                    {/*// 博客内容区*/}
                    <div className={style.BlogArticle}>
                        <div className={wangeditorCss.editorContentView}
                             dangerouslySetInnerHTML={{__html: BlogArticleText.blogContent}}>
                        </div>
                    </div>
                    {/*文章底部*/}
                    <div className={style.blogBottom}>
                        <div className={style.BlogMessage}>
                            <div>
                                <i className="iconfont icon-shijian1"
                                   style={{color: '#96EBE2', marginRight: '0.1rem'}}></i>
                                <span style={{color: '#7C7979'}}>
                                    {timestampToTime(new Date(BlogArticleText.updatedAt).getTime())}
                                </span>
                            </div>
                            <div onClick={setMyCommentAreaStateFun} style={{cursor: "pointer"}}>
                                <i className="iconfont icon-pinglun"
                                   style={{color: '#FFD666', marginRight: '0.1rem'}}></i>
                                <span style={{color: '#7C7979'}}>{BlogArticleText.blogCommentNumber}:查看评论</span>
                            </div>
                            <div>
                                <i className="iconfont icon-liulan"
                                   style={{color: '#1890FF', marginRight: '0.1rem'}}></i>
                                <span style={{color: '#7C7979'}}>{BlogArticleText.blogPageView}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <CommentsSection ref={MyCommentsSection}></CommentsSection>
        </div>
    );
}

export default BlogArticle;
